<template>
	<view class="addAddress">
		<view class="" style="border-radius: 10rpx;background: #fff;padding: 10rpx;">
			<view class="line" style="border-radius: 10rpx 10rpx 0 0;">
				<view class="title"></view>
				<view>
					<view>
						<text>姓名</text>
						<input type="text" name="name" v-model="params.name" placeholder="请填写收货人的姓名" />
					</view>
					<view>
						<text>手机号码</text>
						<input type="text" name="mobile" v-model="params.mobile" placeholder="请填写收货人的手机号码" />
					</view>
				</view>
			</view>
			<view class="line">
				<view class="title"></view>
				<view>
					<view>
						<text>所在地区</text>
						<view @click="showMulLinkageThreePicker">
							{{ params.pca ? params.pca : citys }}
						</view>
					</view>
					<view>
						<text>详细地址</text>
						<input type="text" name="address" v-model="params.address" placeholder="请填写收货人的详细地址" />
					</view>
				</view>
			</view>
			<view class="set" style="border-radius: 0 0 10rpx 10rpx;">
				<view style="margin: 0;justify-content:flex-start">
					<view style="margin: 0 20rpx 0 0 ;">设置默认地址</view>
					<view @click="params.isDefault ? params.isDefault = 0 : params.isDefault = 1">
						<view :class="{act: params.isDefault}"></view>
					</view>
				</view>
			</view>
		</view>
			<view class="btn">
				<button type="warn" style="background: #211F27;" @click="Addaddress" formType="submit">提交</button>
			</view>
			

		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		name: 'comaddr',
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				themeColor: '#007AFF',
				cityPickerValueDefault: [0, 0, 1],
				citys: '请选择地址',
				disabled: false,
				params: {
					name: '', //收货人姓名
					mobile: '', //收货人手机号
					address: '', //收货人地址
					isDefault: 0, //是否设置为默认地址
					pca: '', //省市区
					pcaID: '', //省市区ID
					location_p: '', //省
					location_c: '', //市
					location_a: '' //区
				}
			}
		},
		created() {
			
		},
		onLoad(e) {
			this.params = e.editForm ?  JSON.parse(e.editForm) : {
					name: '', //收货人姓名
					mobile: '', //收货人手机号
					address: '', //收货人地址
					isDefault: 0, //是否设置为默认地址
					pca: '', //省市区
					pcaID: '', //省市区ID
					location_p: '', //省
					location_c: '', //市
					location_a: '' //区
				}
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			onConfirm(e) {
				const cityLabel = e.label.split('-');
				const cityValue = e.value;
				this.params.location_p = cityLabel[0]
				this.params.location_c = cityLabel[1]
				this.params.location_a = cityLabel[2]
				this.params.pcaID = cityValue[0] + '/' + cityValue[1] + '/' + cityValue[2];
				this.$set(this.params,'pca',cityLabel[0] + '/' + cityLabel[1] + '/' + cityLabel[2])
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			Addaddress() {
				if(this.params.id){
					this.$ajax('api/Member/EditAddress',this.params).then(res => {
						if(res.RequestStatus == 200){
							uni.showToast({
								title:'提交成功'
							})
							uni.navigateBack({
								
							})
						}
					})
				}else{
					this.$ajax('api/Member/AddAddress',this.params).then(res => {
						if(res.RequestStatus == 200){
							uni.showToast({
								title:'提交成功'
							})
							uni.navigateBack({
								
							})
						}
					})
				}
				
			},
			back() {
				// // #ifdef H5  
				// let canBack = true
				// const pages = getCurrentPages()
				// // 有可返回的页面则直接返回，uni.navigateBack默认返回失败之后会自动刷新页面 ，无法继续返回  
				// if (pages.length > 1) {
				// 	uni.navigateBack(1)
				// 	return;
				// }
				// // vue router 可以返回uni.navigateBack失败的页面 但是会重新加载  
				// let a = this.$router.go(-1)
				// // router.go失败之后则重定向到首页  
				// if (a == undefined) {
				// 	uni.reLaunch({
				// 		url: "/pages/address/index"
				// 	})
				// }
				// return;
				// // #endif  
				// uni.navigateBack(1)
			},
		}
	}
</script>

<style lang="less">
	.addAddress {
		background: #EAEAEC;
		height: 100vh;
		padding: 30rpx;
		.line {
			.title {
				height: 0;
				line-height: 80upx;
				font-size: 26upx;
				padding: 0 15px;

				&+view {
					padding: 0 15px;
					background-color: white;

					&>view {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20upx 0;
						position: relative;

						&:last-of-type {
							&::after {
								display: none;
							}
						}

						&::after {
							position: absolute;
							content: '';
							border-bottom: 1px solid #f3f3f3;
							left: 0;
							bottom: 0;
							width: 100%;
						}

						&>text {
							font-size: 26upx;
							width: 120upx;
							text-align: justify;
							text-align-last: justify;
							padding-right: 30upx;
						}

						&>view {
							flex: 1;
							padding: 5upx 0;
							font-size: 26upx;
							color: #999
						}

						&>input {
							font-size: 26upx;
							flex: 1;
						}

						&>picker {
							font-size: 26upx
						}
					}
				}
			}
		}

		.set {
			&>view {
				display: flex;
				justify-content: space-between;
				margin-top: 30upx;
				background: white;
				padding: 20upx 15px;

				&>view {
					font-size: 26upx;

					&:last-of-type {
						&>view {
							width: 35upx;
							height: 35upx;
							border: 1px solid #e3e3e3;
							border-radius: 50%;
							box-sizing: border-box;
							margin-right: 15upx;

							&.act {
								background: #ec0000;
								border-color: #ec0000;
								position: relative;

								&::after {
									position: absolute;
									content: '\393';
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									color: white;
									text-align: center;
									transform: rotate(-135deg);
									font-size: 22upx;
								}
							}
						}
					}
				}
			}
		}

		.btn {
			margin: 60upx 15px 0;
		}
	}
</style>
